/*
 * @Author: Zhang Kai
 * @Date: 2021-10-22 17:35:19
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2022-05-08 01:09:19
 * @FilePath: /metricsx-standard-ui/src/components/status/index.tsx
 */
import { defineComponent, PropType } from 'vue';
import '@/components/status/index.scss';

const Status = defineComponent({
  name: 'Status',
  props: {
    name: {
      type: String as PropType<string>,
      default: ''
    },
    color: {
      type: String as PropType<string>,
      default: ''
    },
    /* 是否有状态code */
    isStatus: {
      type: Boolean as PropType<Boolean>
    }
  },
  setup: (props, { slots, attrs, emit }) => {
    return () => {
      const { name, color, isStatus } = props;
      const colorType = () => {
        //是否有状态code 如果没有则根据自己条件在外部判断后传入color
        if (isStatus) {
          switch (color) {
            //草稿
            case 'DRAFT':
              return '#FFA81A';
            //已发布
            case 'PUBLISHED':
              return '#24D17E';
            //未发布
            case 'UNPUBLISHED':
              return '#396EFE';
            default:
              return '';
          }
        } else {
          switch (color) {
            case 'red':
              return '#FF1A3B';
            case 'blue':
              return '#396EFE';
            case 'green':
              return '#24D17E';
            case 'gray':
              return '#9B9FAB';
            case 'yellow':
              return '#FFA81A';
            case 'orange':
              return '#FFA31A';
            default:
              return '';
          }
        }
      };
      return (
        <div class="status-container">
          {name && (
            <>
              <div
                style={{
                  background: colorType()
                }}
                class="chunk"
              ></div>
              <div class="text">{name}</div>
            </>
          )}
        </div>
      );
    };
  }
});

export default Status;
